<!-- @/views/layout/layout.vue -->
<template>
  <div class="layout">
    <!-- 传递当前路由的meta.title -->
    <layout-header :title="currentTitle"></layout-header>
    <main>
      <router-view></router-view>
    </main>

    <footer>
      <footer-tabbar></footer-tabbar>
    </footer>
  </div>
</template>

<script>
import FooterTabbar from "@/components/layout/components/FooterTabbar.vue";
import LayoutHeader from "@/components/layout/components/Header.vue";

export default {
  name: "Layout",
  components: { FooterTabbar, LayoutHeader },
  computed: {
    currentTitle() {
      // 获取当前激活路由的meta.title（支持嵌套路由）
      const matched = this.$route.matched;
      const lastMatched = matched[matched.length - 1];
      return lastMatched?.meta?.title || "默认标题";
    },
  },
  watch: {
    // 监听路由变化（解决keep-alive缓存时标题不更新问题）
    $route() {
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="scss">
/* layout.vue */
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  main {
    flex: 1;
  }
}

/* 适配iOS安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .layout main {
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
}
</style>